{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/search.css">
<body>
<div class="main ">
    <div class="search-vss ">
        <div class="flex items-center justify-between container">
            <i class="layui-icon layui-icon-left mr-30" lay-event="jump" lay-url="back"></i>
            <div class="search flex items-center justify-between flex-1">
                <img src="/static/index/images/index/ic_searchgray@2x.png" alt="" class="icon"/>
                <input class="inp keyword flex-auto" type="text" placeholder="请输入关键字"/>
                <button class="search-btn" lay-click="search">搜索</button>
            </div>
        </div>
    </div>

    <div class="history flex items-center justify-between m-30">
        <div class="text">历史搜索</div>
        <i class="layui-icon layui-icon-delete" lay-click="clear"></i>
    </div>

    <div class="history-list flex m-30">
        {foreach name="history" item="vo"}
        <div class="item" lay-event="jump" lay-url='{:url("product/index")}?keyword={$vo}'>{$vo}</div>
        {/foreach}
    </div>

</div>
</body>
{include file="public/footer"/}
<script>
    layui.use(['methods', 'listen'], function () {
        var a = layui.jquery, m = layui.methods, ly = layui.layer;
        m.event.click(['search', 'clear'], function (data, that) {
            var keyword = a(".keyword").val();
            if (!keyword) {
                ly.msg('请填写要搜索的内容');
                return false;
            }
            location.href = '{:url("product/index")}?keyword=' + keyword;
        },function (){
            ly.confirm('是否清空搜索历史记录？', {title: '请确认'}, function () {
                return m.fetchPostThrottle('{:url("product/emptySearch")}')
            });
        });
    });
</script>

</html>